<template>
   <div class="person">
        <h1>情况三:监视reactive定义的对象类型数据</h1>
        <h2>姓名:{{ person.name }}</h2>
        <h2>年龄:{{ person.age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改人</button>
        <hr>
        <h2>测试:{{ obj.a.b.c }}</h2>
        <button @click="changeObj">修改obj里面的c</button>
   </div>
</template>

<script setup name="Person01" lang="ts">
    import { reactive,watch } from 'vue'
    // 数据
    let person = reactive({
        name:'张三',
        age:18
    })
    let obj = reactive({
        a:{
            b:{
                c:666
            }
        }
    })
    // 方法
    function changeName(){
        person.name += "~"
    }
    function changeAge(){
        person.age += 1
    }
    function changeObj(){
        obj.a.b.c = 111
    }
    function changePerson(){
       Object.assign(person,{name:'李四',age:20})
    }
    watch(obj,(newValue,oldValue)=>{
        console.log('obj被修改了',newValue,oldValue)
    })
    // 监视 情况三:监视reactive定义的对象类型数据,且默认是开启了深度监听的,并且无法关闭
    watch(person,()=>{})
</script>

<style>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button{
        margin : 0 10px;
    }
</style>